<template>
  <view class="center-detail-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        个人资料
      </view>
    </navigation-bar>
    <!-- 头像资料 -->
    <view class="detail-avatar-focus">
      <view class="center-avatar-wappar">
        <u-avatar :src="avatar_url" size="140rpx" mode="aspectFill" @click="previewAvatar"></u-avatar>
        <view class="upload-avatar-icon iconfont" @click="uploadAvatar">
          &#xe620;
        </view>
      </view>
    </view>
    <!-- 其他资料 -->
    <view class="detail-other-list">
      <!-- 资料项 -->
      <navigator :url="'components/edit-nickname/edit-nickname?nickname=' + nicknameInfo" class="detail-item">
        <view class="item-icon iconfont">
          &#xe61b;
        </view>
        <view class="item-name">
          {{nicknameInfo}}
        </view>
      </navigator>
      <view class="detail-item" @click="show_model = true">
        <view class="item-icon iconfont">
          &#xe613;
        </view>
        <view class="item-name">
          {{sexInfo}}
        </view>
      </view>
      <navigator :url="'components/edit-description/edit-description?description=' + descriptionInfo"
        class="detail-item">
        <view class="item-icon iconfont" style="font-size: 36rpx;">
          &#xe612;
        </view>
        <view class="item-name">
          {{descriptionInfo}}
        </view>
      </navigator>
      <navigator :url="'components/edit-sign/edit-sign?sign=' + signInfo" class="detail-item">
        <view class="item-icon iconfont" style="font-size: 36rpx;">
          &#xe60d;
        </view>
        <view class="item-name">
          {{signInfo}}
        </view>
      </navigator>
    </view>
    <!-- 底部弹窗 -->
    <view class="bottom-popup">
      <cc-popup :show="show_model" @click-model="closeModel">
        <view class="select">
          <picker-view class="select-box" indicator-style="height: 33%;" :immediate-change="true" @change="onSexChange">
            <picker-view-column class="select-sex">
              <view class="select-item">
                男
              </view>
              <view class="select-item">
                女
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </cc-popup>
    </view>
  </view>
</template>

<script>
  import ccPopup from "@/components/cc-popup/cc-popup.vue"
  export default {
    data() {
      return {
        avatar_url: '' || '/static/avatar.png',
        avatar_path: '',
        show_model: false,
        nicknameInfo: '昵称', //昵称
        sexInfo: '性别', //性别
        sexOpt: '', //性别选择信息
        descriptionInfo: '自我介绍', //自我介绍
        signInfo: '个性签名', //个性签名
      }
    },
    onLoad() {
      // 监听传递昵称信息事件
      uni.$on('submitNicknameInfo', res => {
        this.nicknameInfo = res || '昵称'
      })
      // 监听传递个人介绍信息事件
      uni.$on('submitDescriptionInfo', res => {
        this.descriptionInfo = res || '自我介绍'
      })
      // 监听传递个性签名信息事件
      uni.$on('submitSignInfo', res => {
        this.signInfo = res || '个性签名'
      })
    },
    onUnload() {
      // 卸载监听传递昵称信息事件
      uni.$off('submitNicknameInfo')
      // 卸载监听传递个人介绍信息事件
      uni.$off('submitDescriptionInfo')
      // 卸载监听传递个人介绍信息事件
      uni.$off('submitSignInfo')
    },
    methods: {
      // 预览头像
      previewAvatar: function() {
        const that = this;
        uni.previewImage({
          urls: [that.avatar_url],
          indicator: 'none'
        })
      },

      // 上传头像
      uploadAvatar: function() {
        const that = this
        uni.chooseMedia({
          count: 1,
          mediaType: ['image'],
          success: function(res) {
            that.avatar_path = res.tempFiles[0].tempFilePath;

            uni.cropImage({
              src: that.avatar_path,
              cropScale: "1:1",
              success: function(res) {
                that.avatar_url = res.tempFilePath
              }
            })
          }
        });
      },

      // 选择器改变
      onSexChange: function(e) {
        if (e.detail.value[0] === 0) {
          this.sexOpt = '男'
        } else {
          this.sexOpt = '女'
        }
      },
      // 关闭操作面板
      closeModel: function() {
        this.show_model = false
        this.sexInfo = this.sexOpt || '性别'
      }
    },
    components: {
      ccPopup
    }
  }
</script>

<style lang="scss">
  .center-detail-container {
    .top-title-bar {}

    .detail-avatar-focus {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 220rpx;

      .center-avatar-wappar {
        position: relative;

        .upload-avatar-icon {
          position: absolute;
          bottom: 0;
          right: -10rpx;
          font-size: 44rpx;
          line-height: 40rpx;
        }

        .clip-model {
          position: fixed;
          top: 0;
          left: 0;
          z-index: 10000;
        }
      }
    }

    .detail-other-list {
      margin-top: 40rpx;
      font-size: 28rpx;

      .detail-item {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        padding: 36rpx 40rpx;

        .item-icon {
          margin-right: 58rpx;
          font-size: 40rpx;
          line-height: 40rpx;
        }

        .item-name {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }

    .bottom-popup {
      .select {
        height: 310rpx;
        padding-top: 90rpx;
        background-color: #FFF;
        border-top-left-radius: 26rpx;
        border-top-right-radius: 26rpx;

        .select-box {
          height: 220rpx;

          .select-sex {
            .select-item {
              line-height: 200%;
              font-size: 36rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>